<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '农事财务记录',
  },
}
</route>

<template>
  <view class="content-warp">
    <view class="content-top">
      <view>本年度支出金额:</view>
      <view class="monney">¥{{ totalAmount || 0 }}</view>
    </view>
    <view class="w-full flex justify-end items-center text-[#56b756] box-border px-[15px]" @click="download">下载表格</view>
    <view class="table-warp">
      <view class="table-warp-for" v-for="(item, index) in summaryList" :key="index">
        <view class="table-top">
          <view>{{ item.farming_time }}</view>
          <text>
            <!--            <text>{{ item.sum }}℃</text>-->
            <text class="carture">{{ item.weather }}</text>
          </text>
        </view>
        <view class="table-content-warp">
          <view class="table-content" v-for="(i, cIndex) in item.children" :key="cIndex">
            <view class="content">
              {{ i.describe }}
            </view>
            <view class="table-monney">
              <view>支出</view>
              <text>{{ i.amount }}</text>
            </view>
          </view>
        </view>
        <view class="table-total">
          <view>支出</view>
          <text>{{ item.sum }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { recordSummary, recordSummaryExcel, recordYearAmount } from '@/service/record'
import {useToast} from "wot-design-uni";
// 查看汇总表格
const summaryParams = reactive<IRecordSummary>({
  page: 1,
  limit: 10,
  year: `${new Date().getFullYear()}`,
})
const summaryList = ref<IRecord[]>([])
const getRecordSummary = async () => {
  const res: IResData<IPageRes<IRecord>> = await recordSummary(summaryParams)
  if (res.code === 1) {
    summaryList.value = res.data.data
  }
}
// 年度支出总金额
const totalAmount = ref(0)
const getTotalAmount = async () => {
  const res: any = await recordYearAmount(summaryParams.year)
  if (res.code === 1) {
    console.log(res, '总金额')
    totalAmount.value = res.data
  }
}
const toast = useToast()
const download = async () => {
  const res: IResData<{ excel_path: string }> = await recordSummaryExcel(summaryParams.year)
  const url = `${import.meta.env.VITE_SERVER_BASEURL}${res.data.excel_path.split('.com')[1]}`
  if (res.code === 1) {
    uni.downloadFile({
      url: url,
      success: (res) => {
        if (res.statusCode === 200) {
          uni.saveFile({
            tempFilePath: res.tempFilePath,
            success: function (res) {
              uni.openDocument({
                filePath: res.savedFilePath,
                success: function (res) {
                  console.log('打开文档成功')
                },
              })
            },
            fail(result) {
              console.log(result)
            },
          })
        }
      },
    })
  }
}
onMounted(() => {})
onLoad(async (options) => {
  summaryParams.year = options.year || ''
  await getRecordSummary()
  await getTotalAmount()
})
</script>

<style scoped lang="scss">
.content-warp {
  background-color: #f4f4f4;
  height: 100%;
  min-height: 100vh;
  position: relative;
}

.content-top {
  opacity: 1;
  background: #56b756;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 35px;
  color: #fff;
  padding: 0 15px;

  .monney {
    font-family: D-DIN;
    font-size: 20px;
    font-weight: bold;
    line-height: 26px;
    text-align: center;
    display: flex;
    align-items: center;
    letter-spacing: 0px;
    color: #ffffff;
  }
}

.table-warp {
  margin: 15px;
  opacity: 1;
  background: #ffffff;
  box-sizing: border-box;
  border: 1px solid #f7f7f7;
  .table-warp-for {
    margin-bottom: 15px;
  }
  .table-warp-for:last-child {
    margin-bottom: 0px;
  }
  .table-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    background: #f8f9fa;

    view {
      font-family: Source Han Sans;
      font-size: 16px;
      font-weight: normal;
      line-height: 22px;
      text-align: center;
      display: flex;
      align-items: center;
      letter-spacing: 0.32px;
      color: #666666;
    }

    text {
      font-family: Source Han Sans;
      font-size: 14px;
      font-weight: normal;
      line-height: 28px;
      letter-spacing: 0px;
      color: #333333;

      .carture {
        margin: 0 10px;
      }
    }
  }

  .table-content-warp {
    border-left: 1px solid #f7f7f7;
    border-right: 1px solid #f7f7f7;

    .table-content {
      padding: 0 15px;
      padding-right: 5px;
      .table-monney {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 10px;
        padding-bottom: 14px;
        border-bottom: 1px solid #f7f7f7;
        font-family: Source Han Sans;
        font-size: 16px;
        font-weight: normal;
        line-height: 22px;
        letter-spacing: 0.32px;
        color: #666666;

        text {
          font-family: D-DIN;
          font-size: 18px;
          font-weight: normal;
          line-height: 22px;
          letter-spacing: 0px;
          color: #56b756;
        }
      }
    }

    .content {
      font-family: Source Han Sans;
      font-size: 14px;
      font-weight: 350;
      line-height: 22px;
      display: flex;
      align-items: center;
      letter-spacing: 0.32px;
      color: #666666;
      padding-top: 15px;
      padding-bottom: 10px;
    }
  }

  .table-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    opacity: 1;
    background: rgba(86, 183, 86, 0.1);
    padding-left: 15px;
    padding-right: 5px;
    font-size: 16px;
    font-weight: normal;
    line-height: 22px;
    letter-spacing: 0.32px;
    font-variation-settings: 'opsz' auto;
    color: #666666;

    text {
      font-family: Source Han Sans;
      font-size: 16px;
      font-weight: bold;
      line-height: 22px;
      letter-spacing: 0.32px;
      color: #56b756;
    }
  }
}
</style>
